<template>
  <div >
    <transition name="fade">
      <div class="v-modal table-mask" v-if="showEdit"  @click="hiden"></div>
    </transition>
    <transition name="bf-horizontal" >
      <div class="bf-table-right-module"  v-if="showEdit" v-bind:style="{ width: width + 'px' }">
        <div class="shadow-b clearfix bf-table-right-module-title">
          <div class="float-l"><span class="bar-l"></span>{{title?title:'搜索'}}</div>
          <div class="float-r " @click="hiden" ><img src="../../../assets/beneform4j/home/icon_close.png" alt=""></div>
        </div>

        <div class="bf-table-right-form">
          <div>
            <el-form ref="form" :model="form"  label-position="right"  label-width="110px" class="clearfix">
              <div  v-for="item in editFormFilter" :key="item.field" v-bind:style="{ width: item.onlyRow? 100 : 100/rowNum + '%' }" class="bf-table-form-item padding-l padding-r">
                <component v-bind:is="'bf-form-'+item.type" :form="form" :item="item" :userId="userId"></component>
              </div>
            </el-form>
          </div>
        </div>
        <div class="bf-table-right-module-bottom shadow-t">
          <el-button type="primary" @click="sure">{{actionTitle}}</el-button>
          <el-button @click="hiden">取消</el-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'bfTableForm',
  props: ['editForm', 'width', 'rowNum', 'title'],
  data() {
    return {
      showEdit: false,
      form: {},
      actionTitle: '确定',
      userId: ''
    }
  },
  methods: {
    show() {
      this.showDom()
    },
    hiden() {
      this.showEdit = false
      document.body.style.overflow = 'initial'
    },
    hidden() {
      this.hiden()
    },
    search() {
      this.showDom()
      this.actionTitle = '搜索'
    },
    showDom() {
      this.clearValue()
      this.showEdit = true
      document.body.style.overflow = 'hidden'
    },
    clearValue() {
      this.form = {}
    },
    sure() {
      delete this.form['_orgid']
      this.$emit('formSubmit', this.form, this.editForm)
    }
  },
  mounted: function() {
  },
  computed: {
    editFormFilter: function() {
      return this.editForm.filter((v) => {
        if (v.searchable) {
          return true
        }
      })
    }
  }

}
</script>

<style scoped>

  .table-mask{
    z-index: 2003;
  }


</style>
